

/**
 * 什么是Redux：
 *    Redux是React最常用的集中状态管理工具，
 *    类似于Vue的Pinia(Vuex)，可以独立与框架运行
 *  通过集中管理的方式管理应用的状态
 * 
 * 实现步骤：
 *  1.定义一个reducer函数(根据当前想要做的修改返回一个新的状态)
 *  2.使用createStore方法传入reducer函数，生成一个store实例对象
 *  3.使用store实例的subscribe方法订阅数据的变化，(数据一旦变化，可以得到通知)
 *  4.使用store实例的dispatch方法提交action对象，触发数据变化(告诉reducer你想要修改数据)
 *  5.使用store实例的getState方法，获取最新的状态数据更新到视图中
 */


/**
 * 在React组件中使用store中的数据，需要用到一个钩子函数 - useSelector
 *  它的作用是把store中的数据映射到组件中，使用样例如下
 * 
 * const {count} = useSelector(state => state.counter)
 */


import { useDispatch, useSelector } from "react-redux";
//导入actionCreater
import { inscrement,descrement,addToNumber } from "./store/modules/counterStore" 


function App() {
  const {count} = useSelector(state => state.counter)
  const dispatch = useDispatch()


  return (
    <div>
      <button onClick={()=>{dispatch(descrement())}}>-</button>
      {count}
      <button onClick={()=>{dispatch(inscrement())}}>+</button>
      <button onClick={()=>{dispatch(addToNumber(10))}}>add to 10</button>
      <button onClick={()=>{dispatch(addToNumber(20))}}>add to 20</button>
    </div>
  );
}

export default App;
